
<!-- 大盘指数 -->
<template>
	<div>
		<van-row gutter="20" class="border_css" >
			<van-col span="8" v-model="sh"><span :class="sh.nowPri > 0 ? 'error' : 'success' ">{{ sh.nowPoint | numFilter }} <br >{{ sh.nowPri | numFilter }}  {{ sh.increPer | numFilter }}%</span><br/><span class="title">{{ sh.typeName }}</span> </van-col>
		  <van-col span="8" v-model="sz"><span :class="sz.nowPri > 0 ? 'error' : 'success' ">{{ sz.nowPoint | numFilter }} <br >{{ sz.nowPri | numFilter }} {{ sz.increPer | numFilter }}%</span> <br/><span class="title">{{ sz.typeName }}</span></van-col>
		  <van-col span="8" v-model="cy"><span :class="cy.nowPri > 0 ? 'error' : 'success' ">{{ cy.nowPoint | numFilter }} <br >{{ cy.nowPri | numFilter }} {{ cy.increPer | numFilter }}%</span> <br/><span class="title">{{ cy.typeName }}</span></van-col>
		</van-row>
	</div>
</template>

<script>
	export default {
		name:"daPan",
		created:function(){
			this.initWebSocket();
		},
		destroyed() {
			this.websock.close() //离开路由之后断开websocket连接
		},
		data() {
		   return {
		   	websock: null,
		     
			  sh:{"dealNum":"-0","dealPri":"-0","increPer":"-0","nowPoint":"-0","nowPri":"-0","typeId":"-0","typeName":"上证指数"},
			  sz:{"dealNum":"-0","dealPri":"-0","increPer":"-0","nowPoint":"-0","nowPri":"-0","typeId":"-0","typeName":"深证成指"},
			  cy:{"dealNum":"-0","dealPri":"-0","increPer":"-0","nowPoint":"-0","nowPri":"-0","typeId":"-0","typeName":"创业板指"},
		   };
		 },
		 methods:{
		 	initWebSocket(){ //初始化weosocket
		 		const wsuri = "ws://"+ location.hostname +":8088/socket/10/1";
		 		this.websock = new WebSocket(wsuri);
		 		this.websock.onmessage = this.websocketonmessage;
		 		this.websock.onopen = this.websocketonopen;
		 		this.websock.onerror = this.websocketonerror;
		 		this.websock.onclose = this.websocketclose;
		 	},
		 	websocketonopen(){ //连接建立之后执行send方法发送数据
		 
		 	},
		 	websocketonerror(){//连接建立失败重连
		 		//this.initWebSocket();
		 	},
		 	websocketonmessage(e){ //数据接收
		 		const redata = JSON.parse(e.data);
		 		console.info(redata);
		 		this.sh = redata['sh000001'];
		 		this.sz = redata['sz399001'];
		 		this.cy = redata['sz399006'];
		 	},
		 	websocketsend(Data){//数据发送
		 		this.websock.send(Data);
		 	},
		 	websocketclose(e){  //关闭
		 		console.log('断开连接',e);
		 	},
		 },
		 filters: {
		 	numFilter (value) {
		 		let realVal = ''
		 		if (!isNaN(value) && value!== '') {
		 			// 截取当前数据到小数点后两位
		 			realVal = parseFloat(value).toFixed(2)
		 		} else {
		 			realVal = '--'
		 		}
		 		return realVal
		 	}
		 }
	}
</script>

<style scoped>

	.error {
		color: #f00;font-size:14px;
	}
	.success {
		color: #006f00;font-size:14px;
	}

	.border_css{
		text-align: center;
		margin-top: 1rem;
		padding-bottom: 1rem;
	}
	.title {
		margin-top: 5px;
		display: block;
	}
</style>
